<template>
    <div class="line-chart-container">
      <div v-if="isRendered" id="lineChart" class="line-chart"></div>
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'LineGraph',
    data() {
      return {
        // 初始化图表
        chart: null,
        isRendered:false
      }
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.isRendered = true;
  
      // 图表的配置项和数据
      const option2 = {
        title: {
          text: '动态变化的折线图'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'line',
          smooth: true,
          areaStyle: {}
        }]
      }
  
      // 使用刚指定的配置项和数据显示图表
    //   this.chart.setOption(option)
  
      // 模拟数据动态变化
      setInterval(() => {
        cc.series[0].data = cc.series[0].data.map(item => item + Math.random() * 20 - 10)
        this.chart.setOption(cc)
      }, 2000)
    }
  }
  </script>
  
  <style>
  .line-chart-container {
    width: 100%;
    height: 400px;
  }
  
  .line-chart {
    width: 100%;
    height: 100%;
  }
  </style>